<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增商户')" />
	<th:block th:include="include :: ztree-css" />
	<style>
		input{
			width: 250px;padding-left:5px;margin-top: 10px;height: 25px;border-radius: 3px;border: 1px solid lightblue;
		}

	</style>
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-Commodity-add">
		<table cellpadding="5" style="margin-left: 100px" id="itemParamAddTable" class="itemParam">
			<th style="font-family: 'Lucida Console';font-size: 16px">规格参数</th>
			<tr class="addGroupTr">
				<td>
					<button type="button" class="btn btn-primary" id="addGroup" data-toggle="button" style="margin-left: 400px;height: 30px;">添加分組</button>
					<ul th:each="attributes : ${jsonArray}" style="list-style: none">
						<li >分类名称：
							<input class="easyui-textbox"  name="group" th:value="${attributes.group}" value=""/>&nbsp;
							<a href="javascript:void(0)" class="easyui-linkbutton addOldParam"  title="添加参数" data-options="plain:true,iconCls:'icon-add'">添加参数</a>
							<a href="javascript:void(0)" class="easyui-linkbutton delOldGroup"  title="删除分类" data-options="plain:true,iconCls:'icon-add'">删除分类</a>
						</li>
						<li th:each="items : ${attributes.item}">
							<span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp属性名称：</span><input  class="easyui-textbox" th:value="${items.name}" value="" name="param"/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton delOldParam" title="删除" data-options="plain:true,iconCls:'icon-cancel'">删除</a>
						</li>
					</ul>
				</td>
			</tr>
		</table>
		<div  class="itemParamAddTemplate" style="display: none;">
				<ul style="list-style: none">
					<li>分类名称：
						<input class="easyui-textbox" name="group" value=""/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton addParam"  title="添加参数" data-options="plain:true,iconCls:'icon-add'">添加参数</a>
						<a href="javascript:void(0)" class="easyui-linkbutton delGroup"  title="删除分类" data-options="plain:true,iconCls:'icon-add'">删除分类</a>
					</li>
					<li>
						<span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp属性名称：</span><input class="easyui-textbox;" name="param"/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton delParam" title="删除" data-options="plain:true,iconCls:'icon-cancel'">删除</a>
					</li>
				</ul>
		</div>
		</form>
	</div>
	<th:block th:include="include :: footer"/>

	<script th:inline="javascript">
			$("#addGroup").click(function(){
				var temple = $(".itemParamAddTemplate ul").eq(0).clone();
				$(this).parent().append(temple);
				$("li").find(".addParam").click(function(){
					var li = $(".itemParamAddTemplate li").eq(1).clone();
					li.find(".delParam").click(function(){
						$(this).parent().remove();
					});
					li.appendTo($(this).parentsUntil("ul").parent());
				});
				$("li").find(".delParam").click(function(){
					$(this).parent().remove();
				});
				$(".delGroup").click(function(){
					//移除当前li的父类ul
					$(this).parent().parent().remove();
				});
			});

			$(".delOldGroup").click(function(){
				//移除当前li的父类ul
				$(this).parent().parent().remove();
			});
			$(".delOldParam").click(function(){
				//二级规格移除当前li
				$(this).parent().remove();
			});
			$(".addOldParam").click(function(){
				var li = $(".itemParamAddTemplate li").eq(1).clone();
				li.find(".delParam").click(function(){
					$(this).parent().remove();
				});
				li.appendTo($(this).parentsUntil("ul").parent());
			});


		//确定按钮
		function submitHandler() {
			var templateId=[[${templateId}]];
			var params = [];
			var groups = $("#itemParamAddTable [name=group]");
			groups.each(function(i,e){
				var p = $(e).parentsUntil("ul").parent().find("[name=param]");
				var _ps = [];
				p.each(function(_i,_e){
					var _val = $(_e).val();
					if($.trim(_val).length>0){
						_ps.push({"name":_val});
					}
				});
				var _val = $(e).val();
				if($.trim(_val).length>0){
					params.push({
						"group":_val,
						"item":_ps
					});
				}
			});
			var url = "/templateController/updateAttribute";
			$.post(url,{templateId:templateId,attribute:JSON.stringify(params)},function(data){
				if (data.code == web_status.SUCCESS) {
					$.modal.close();
					parent.$.modal.msgSuccess(data.msg);
					parent.$.table.refresh();
				}else{
					$.modal.alertError(data.msg);
				}
			});
		}

	</script>
</body>
</html>
